<template>
  <Form ref="formDynamic" :model="formDynamic" :label-width="80">
    <Form-item
      v-for="(item, index) in formDynamic.items"
      :key="index"
      :label="'股东' + (index + 1)"
      :prop="'items.' + index + '.value'"
      :rules="{required: true, message: '股东' + (index + 1) +'不能为空', trigger: 'blur'}">
      <Row>
        <Col span="2">
        <Input type="text" v-model="item.value" placeholder="姓名"></Input>
        </Col>
        <Col span="3">
        <Input type="text" placeholder="身份证"></Input>
        </Col>
        <Col span="2">
        <Input type="text" placeholder="持股比例"></Input>
        </Col>

        <Col span="2">
        <Upload action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block">
          <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
        </Upload>
        </Col>
        <Col span="2">
        <Button type="ghost" @click="handleRemove(index)">删除</Button>
        </Col>
      </Row>
    </Form-item>
    <Form-item>
      <Row>
        <Col span="12">
        <Button type="dashed" @click="handleAdd" icon="plus-round">新增</Button>
        </Col>
      </Row>
    </Form-item>
    <!--<Form-item>
        <Button type="primary" @click="handleSubmit('formDynamic')">提交</Button>
        <Button type="ghost" @click="handleReset('formDynamic')" style="margin-left: 8px">重置</Button>
    </Form-item>-->
  </Form>
</template>
<script>
  export default {
    data () {
      return {
        formDynamic: {
          items: [
            {
              value: ''
            }
          ]
        }
      }
    },
    methods: {
      handleAdd () {
        this.formDynamic.items.push({
          value: ''
        });
      },
      handleRemove (index) {
        this.formDynamic.items.splice(index, 1);
      }
    }
  }
</script>
